<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>注册 | 智慧海洋牧场</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    *{box-sizing:border-box;margin:0;padding:0;font-family:'Noto Sans SC',sans-serif;}
    html,body{height:100%;width:100%;overflow:hidden;}
    .container{display:flex;height:100%;}
    /* 左侧表单区 */
    .left-form{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
    .left-form h2{font-size:2rem;font-weight:700;margin-bottom:2.5rem;color:#333;}
    .form-wrapper{width:70%;max-width:350px;display:flex;flex-direction:column;gap:1.1rem;}
    .input-box{background:#efefef;border-radius:8px;display:flex;align-items:center;padding:.85rem 1rem;gap:.8rem;}
    .input-box i{color:#9e9e9e;}
    .input-box input{border:none;background:transparent;outline:none;width:100%;font-size:1rem;color:#333;}
    /* 角色选择 */
    .role-select{background:#efefef;border-radius:8px;padding:.6rem 1rem;font-size:1rem;color:#333;outline:none;border:none;}
    .reg-btn{margin-top:1.5rem;background:#1e88e5;border:none;width:100%;padding:.85rem;border-radius:999px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background .3s;}
    .reg-btn:hover{background:#0069c0;}
    .other{margin-top:2.2rem;font-size:.9rem;color:#333;font-weight:600;}
    .socials{display:flex;gap:1.2rem;margin-top:.8rem;}
    .circle{height:48px;width:48px;border:2px solid #1e88e5;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,color .3s;}
    .circle i{color:#1e88e5;font-size:1.2rem;}
    .circle:hover{background:#1e88e5;}
    .circle:hover i{color:#fff;}

    /* 右侧蓝色区 */
    .right-blue{flex:1.2;background:#1e88e5;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 2rem;clip-path:ellipse(85% 100% at 100% 50%);}
    .right-blue h3{font-size:2rem;font-weight:700;margin-bottom:.8rem;text-align:center;}
    .right-blue p{font-size:1rem;margin-bottom:1.5rem;opacity:.9;text-align:center;}
    .outline-btn{background:transparent;border:2px solid #fff;color:#fff;padding:.6rem 2.4rem;border-radius:999px;font-size:1rem;cursor:pointer;transition:background .3s,color .3s;}
    .outline-btn:hover{background:#fff;color:#1e88e5;}
    .illustration{margin-top:3rem;width:60%;max-width:260px;}

    /* 弹窗样式 */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:1000;}
    .modal{background:#fff;border-radius:12px;padding:2rem 2.5rem;max-width:320px;width:80%;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.18);}
    .modal h4{font-size:1.2rem;font-weight:700;color:#333;margin-bottom:.8rem;}
    .modal p{font-size:.95rem;color:#555;margin-bottom:1.5rem;}
    .modal button{background:#1e88e5;color:#fff;border:none;padding:.6rem 1.8rem;border-radius:999px;font-size:.95rem;cursor:pointer;}
    .modal button:hover{background:#0069c0;}
    .modal.success h4{color:#1e88e5;}

    /* 响应式调整 */
    @media(max-width:768px){
      .container{flex-direction:column-reverse;}
      .right-blue{clip-path:none;width:100%;height:45%;border-top-right-radius:50% 20%;border-top-left-radius:50% 20%;}
      .left-form{height:55%;}
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 注册表单 -->
    <section class="left-form">
      <h2>注册</h2>
      <form class="form-wrapper" id="regForm" action="/register" method="post">
        <div class="input-box"><i class="fa-solid fa-user"></i><input type="text" name="nm" placeholder="用户名" required></div>
        <div class="input-box"><i class="fa-solid fa-lock"></i><input type="password" name="pd" placeholder="密码" required></div>
        <select class="role-select" name="role" required>
          <option value="user" selected>普通用户</option>
          <option value="admin">管理员</option>
        </select>
        <button type="submit" class="reg-btn">立即注册</button>
      </form>
     
    </section>

    <!-- 蓝色欢迎区 -->
    <section class="right-blue">
      <h3>已有账号?</h3>
      <p>立即登录已有账号，享受独家权益。</p>
      <form action="/" method="get">
        <button type="submit" class="outline-btn">去登录</button>
      </form>
      
    </section>
  </div>

  <!-- 通用弹窗 -->
  <div class="modal-overlay" id="modal">
    <div class="modal">
      <h4 id="modalTitle">提示</h4>
      <p id="modalMsg">信息内容</p>
      <button id="modalClose">知道了</button>
    </div>
  </div>

  <script>
    const modal = document.getElementById('modal');
    const modalTitle = document.getElementById('modalTitle');
    const modalMsg = document.getElementById('modalMsg');
    const modalClose = document.getElementById('modalClose');
    modalClose.onclick = () => modal.style.display = 'none';

    // 注册表单 AJAX 提交
    document.getElementById('regForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      try {
        const res = await fetch('/register', {method:'POST', body:formData});
        if(res.ok){
          // 成功：弹窗提示后跳转
          showModal('注册成功！', '即将前往登录页...', true);
          setTimeout(()=>{ window.location.href='/'; }, 1800);
        }else{
          const data = await res.json().catch(()=>({message:'注册失败'}));
          showModal('操作失败', data.message || '注册失败');
        }
      }catch(err){
        showModal('网络错误', '请稍后重试');
      }
    });

    function showModal(title,msg,success=false){
      modalTitle.textContent = title;
      modalMsg.textContent = msg;
      if(success){
        modal.querySelector('.modal').classList.add('success');
      }else{
        modal.querySelector('.modal').classList.remove('success');
      }
      modal.style.display = 'flex';
    }
  </script>
</body>
</html>